import React from 'react'
import { Editor,Link, success, Button } from '../../ui-components'
import style from './style.resume'
import util from '../../util'
import cx from 'classnames'

export default
class extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			text: null,
			editable: false
		}
	}

	update() {
		if (this.state.text !== null) {
			this.props.updateUserProfile(this.props.params.userId, {
				resume: this.state.text
			}, () => {
				success('更新简历成功!')

				this.setState({
					editable: false
				})
			})
		} else {
			this.setState({
				editable: false
			})
		}
	}

	toggle() {
		this.setState({
			editable: !this.state.editable
		})
	}

  cancel() {
    this.toggle()
  }

  renderContent() {
		const text = this.state.text || util.find(this.props.profileFieldVOs || [], item => item.referenceName === 'resume').dataValue || ''
    if (!this.props.profileFieldVOs) return null
    if (this.state.editable) {
      return (
        <div 
          className={style.editor}
        >
          <Editor
            options={{
              placeholder: false
            }}
            width={648}
            onChange={text => this.setState({text})}
            text={text}
          />
          <div className={style.actions}>
            <Button 
              className={style.submit} 
              label="更新" 
              onClick={::this.update}/>
            <Button 
              blueLine
              className={style.cancel} 
              label="取消" 
              onClick={::this.cancel}/>
          </div>
        </div>
      )
    }

    if (!util.isNull(this.props.profileFieldVOs)) {
      const el = document.createElement('div')
      el.innerHTML = text
      if (!el.textContent.trim().length) {
        return (
          <div style={{ width: '220px', margin: 'auto', textAlign: 'center', marginTop: '24px' }}>
            <img width="150" height="150" src={`${util.getImagePath()}/default/intro.png`}/>
            <div style={{ fontSize: '18px', color: '#999', marginTop: '20px' }}>
              {
                this.props.isSelf? '您还没有填写个人简历': '这位同事没有填写个人简历'
              }
            </div>
            {
              this.props.isSelf?
              <a onClick={() => this.setState({ editable: true })} style={{ textDecoration: 'none', cursor: 'pointer', marginLeft: '43px', width: '130px', height: '40px', color: '#777', fontsize: '16px', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center',  marginTop: '15px' }}>立即填写</a>
              : null
            }
          </div>
        )
      }
    }

    return (
      <div className={style['modify-wrapper']}>
        <div 
          className={style.editor}
          dangerouslySetInnerHTML={{__html: text}}
        >
        </div>
        {
          (this.props.isSelf && !this.state.editable) ?
          <Link
            icon="modify"
            className={style.modify} 
            onClick={::this.toggle}/>
          : null
        }
      </div>
    )
  }

	render() {
		return (
			<div className={style.root}>
				<div className={style.head}>
					<h2>个人简历</h2>
				</div>
        { this.renderContent() }
			</div>
		)
	}
}
